<template>
	<view class="container">
		<view class="product-container" :style="{ height: productRefHeight }" ref="productRef" id="productRef">

			<scroll-view scroll-anchoring enableBackToTop="true" scroll-with-animation scroll-y class="scroll-page"
				:scroll-top="tabScrollTop" @scroll="pageScroll">
				<!-- 轮播图 -->
				<GoodsSwiper id="main1" :res="imgList" />
				<view class="content-container">
					<view class="priceInfo">
						<view class="h1View">
							<view class="h3View">
								<image v-if="isSeckill" class="miaoshaIcon"
									src="/module_mall/static/mall_index_icon_miaosha.png">
								</image>
								<view class="h1" v-if="isSeckill"
									style="width: 450rpx;font-size: 28rpx;line-height: 36rpx;">
									{{goodsDetail.productName}}
								</view>
								<view class="h1" v-else>{{goodsDetail.productName}}</view>
							</view>
							<view class="endtext" v-if="isSeckill">距离活动结束</view>
						</view>

						<view class="h1View" v-if="!isSeckill">
							<view class="h3" style="margin-top: 8rpx;">{{goodsDetail.context}}</view>
						</view>

						<view class="h1View">
							<view class="h2" style="margin-top: 8rpx;">{{goodsDetail.recommand}}</view>
							<u-count-down v-if="isSeckill" :time="diff" format="DD:HH:mm:ss" autoStart millisecond
								@change="onChange">
								<view>
									<text class="endtext" style="margin-right:12rpx;">{{ timeData.days}}&nbsp;天 </text>
									<text class="countdownTime" v-if="timeData.hours>9">{{timeData.hours}} </text>
									<text class="countdownTime" v-else>0{{timeData.hours}} </text>
									<text class="endtext jianju">:</text>
									<text class="countdownTime" v-if="timeData.minutes>9">{{ timeData.minutes }}</text>
									<text class="countdownTime" v-else>0{{ timeData.minutes }}</text>
									<text class="endtext jianju">:</text>
									<text class="countdownTime" v-if="timeData.seconds>9">{{ timeData.seconds }}</text>
									<text class="countdownTime" v-else>0{{ timeData.seconds }}</text>
								</view>
							</u-count-down>



						</view>


						<view class="h3View" style="margin-top: 8rpx;">
							<view class="h3">{{goodsDetail.price}}</view>
							<div style='margin-left: 20rpx;' class="goods-price_1" v-if="goodsDetail.oldPrice">
								{{ goodsDetail.oldPrice | unitPrice }}
							</div>
						</view>



						<!-- <view  class="h4">购买方式</view>
					<view class="way">
						<view>339元</view>
						<view class="selected">45000积分</view>
						<view>99元+1000积分</view>
					</view> -->
					</view>

					<!-- 规格与地址-->
					<view class="specification">
						<view class="card-flex" @click="shutMask(4)">
							<view class="card-title"> 选择 </view>
							<view class="card-content">
								<span v-if="selectedGoods">
									<span v-if="selectedGoods.guige1">
										{{ selectedGoods.guige1 }}
									</span>
									<span v-if="selectedGoods.guige2">
										-{{ selectedGoods.guige2 }}
									</span>
									<span v-if="selectedGoods.guige3">
										-{{ selectedGoods.guige3 }}
									</span>
								</span>
								<span v-else>默认</span>
							</view>
							<view class="card-bottom">
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<!-- <view class="card-flex">
				    <view class="card-title">发货</view>
				    <view class="card-content">
				      <span>啊大大</span>
				    </view>
				  </view> -->
						<!-- <view class="card-flex">
				    <view class="card-title">配送</view>
				    <view class="card-content">
				      <span>啊大大</span>
				    </view>
				  </view> -->
						<view class="card-flex">
							<view class="card-title">运费</view>
							<view class="card-content">
								<span>{{goodsDetail.freightPrice}}</span>
							</view>
						</view>
					</view>
					<!-- 平价 -->
					<view class="remark">
						<!-- 评价 -->
						<Evaluation :productComment='productComment' :showHeader='true' :commDetailList="commDetailList"
							@lookAllEvaluation="lookAllEvaluation" />
					</view>
					<view class="goods-detail">
						<text class="title">商品详情</text>
						<block :key="index" v-for="(item, index) in goodsDetail.jieshaoUrls">
							<!-- <jyf-parser class="content"
								:html="item">
							</jyf-parser> -->
							<image :src="item" style="width: 750rpx;" mode="widthFix"></image>
						</block>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="page-bottom iphonex-bottom" id="pageBottom">
			<view class="icon-btn">
				<view class="icon-btn-item" @click="reluchToMall()">
					<image src="/module_mall/static/mall_index_icon_home.png"></image>
					<view class="red icon-btn-name">首页</view>
				</view>
				<view class="icon-btn-item" @click="searviceTouched()">
					<image src="/module_mall/static/mall_index_icon_service.png"></image>
					<view class="icon-btn-name">客服</view>
				</view>
				<view class="icon-btn-item"  style="color: transparent;"><!-- @click="reluchToCart()" -->
					<!-- <image src="/module_mall/static/mall_index_icon_cart.png"></image> -->
					<view class="icon-btn-name">购物车</view>
					<view v-if="nums && nums > 0" class="num-icon">{{ nums }}</view>
				</view>
			</view>

			<!-- 正常结算页面 -->
			<view class="buy-btn">
				<!-- <view class="to-store-car to-store-btn" @click="shutMask(4)">
					加入购物车</view> -->
				<view class="to-buy to-store-btn" @click="shutMask(4, 'buy')">立即购买</view>
			</view>
		</view>
		<popupGoods :buyMask="buyMask" :isSeckill="isSeckill" ref="popupGoodsItemInfoAPP" @closeBuy="closePopupBuy"
			:goodId="goodsDetail.id" @changeGuige="changeGuige" :goodsDetail='goodsDetail' />
	</view>
</template>

<script>
	const app = getApp();
	const dialog = require("@/utils/dialog.js");
	import GoodsSwiper from "./component/-goods-swiper.vue"; //轮播图组件
	import Evaluation from "./component/-evaluation"; //评价组件
	import popupGoods from "./component/goods-popup/goods"; //购物车商品的模块
	const util = require("@utils/util.js");
	import dayjs from 'dayjs'
	// #ifdef APP-PLUS
	const PluginModule = uni.requireNativePlugin("PluginModule");
	// #endif

	export default {
		components: {
			GoodsSwiper,
			Evaluation,
			popupGoods
		},
		data() {
			return {
				isSeckill: false,
				goodId: '',
				productRefHeight: '222px',
				current: "1", //当前显示的轮播图页
				tabScrollTop: '',
				nums: '0',

				goodsDetail: {}, //商品数据
				// goodsItemInfo: {}, //商品-规格属性
				productComment: '0',
				commDetailList: [],
				selectedGoods: null, //选择的商品规格昵称
				imgList: [], //轮播图数据

				diff: 0,
				timeData: {},
				nowTime: '',
				expireTime: '',






				// goodsSpec: "", //规格数据


				favorite: false, //收藏与否flag
				recommendList: [], //推荐列表
				goodsInfo: false, //商品介绍弹窗
				addressFlag: false, //配送地址弹窗
				buyMask: false, //添加购物车直接购买，查看已选 弹窗

				// delivery: ''
			}
		},
		mounted() {
			// uni.setNavigationBarTitle({
			// 	title:"商品详情"
			// })
			// this.getGoodsDetail("1");

			const {
				windowHeight
			} = uni.getSystemInfoSync();
			let bottomHeight = 0;
			let topHeight = 0;
			uni.getSystemInfo({
				success: function(res) {
					// res - 各种参数
					let bottom = uni.createSelectorQuery().select(".page-bottom");
					bottom
						.boundingClientRect(function(data) {
							if (data && data.height) {
								//data - 各种参数
								bottomHeight = data.height; // 获取元素宽度
							}
						})
						.exec();
					let top = uni.createSelectorQuery().select(".header");
					top
						.boundingClientRect(function(data) {
							if (data && data.height) {
								//data - 各种参数
								topHeight = data.height; // 获取元素宽度
							}
						})
						.exec();
				},
			});

			this.productRefHeight = windowHeight - app.globalData.navigationBarHeight - bottomHeight + "px";

		},
		onLoad(options) {
			this.goodId = options.goodid
			if (options.isSeckill && options.isSeckill == 'true') {
				this.isSeckill = true
			}

		},
		onShow() {
			var that = this
			this.getGoodsDetail(that.goodId);
			this.getProductCommentCountByProductId(that.goodId);
			this.getProductPageListByProductId()



		},
		methods: {
			//时间倒计时
			onChange(e) {
				this.timeData = e
			},
			getBeiJingTime: function() {
				var that = this;
				var uri = app.globalData.config.interfaces
					.URL_SYS_API_GETBEIJINGTIME;
				var params = {};
				this.$network.get(uri, params, 'json').then(res => {
					if (res.code == 200) {
						console.log("已读", JSON.stringify(res));
						that.nowTime = res.data
						that.diff = dayjs(that.expireTime).diff(dayjs(that.nowTime))
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}

				}).catch(res => {
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			//选择规格结果
			changeGuige: function(guige1Name, guige2Name, guige3Name) {
				this.selectedGoods = {
					guige1: guige1Name,
					guige2: guige2Name,
					guige3: guige3Name,
				}
			},
			//跳转评论详情
			lookAllEvaluation: function(showHeader) {
				if (showHeader) {
					uni.navigateTo({
						url: '/module_mall/goodsDetail/lookAllEvaluation?goodId=' + this.goodId
					})
				}

			},
			//跳转到首页
			reluchToMall: function() {
				uni.switchTab({
					url: '/pages/mall/mall'
				})
			},
			//跳转我的购物车
			reluchToCart: function() {
				if (util.isLogin(getApp())) {
					uni.navigateTo({
						url: '/module_mall/cart/myShoppingCart'
					})
				} else {
					util.jumpLogin();
				}
			},
			//在线客服
			searviceTouched: function() {
				if (util.isLogin(getApp())) {
					// #ifdef APP-PLUS
					PluginModule.startWebView({
						'title': '在线客服',
						'url': 'https://wpa1.qq.com/S92doXo6?_type=wpa&qidian=true&_pid=boqvjc.tgiohg.l6lkpmoi'
					}, res => {
						console.log(res)

					});
					// #endif
				} else {
					util.jumpLogin();
				}
			},
			//查询商城商品详情（APP）
			getGoodsDetail: function(id) {
				var that = this;
				var uri;
				if (that.isSeckill) {
					uri = app.globalData.config.interfaces
						.URL_ACTIVITY_PFMALLSECKILL_GETSECKILLINFOAPP;
				} else {
					uri = app.globalData.config.interfaces
						.URL_ACTIVITY_PFMALLPRODUCTS_GETGOODSINFOAPP;
				}

				var params = {
					"id": id
				};
				this.$network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.goodsDetail = res.data
						that.imgList = that.goodsDetail.lunboUrls
						if (that.isSeckill == true) {
							that.expireTime = that.goodsDetail.seckillEndtime
							that.getBeiJingTime()
						}
					} else {
						dialog.toast(res.message);
					}
				}).catch(err => {
					console.log(err)
				});
			},
			//根据商品ID,查询商品订单评价数目(APP)
			getProductCommentCountByProductId: function(id) {
				var that = this;
				var uri = app.globalData.config.interfaces
					.URL_ACTIVITY_PRODUCTCOMMENT_GETPRODUCTCOMMENTCOUNTBYPRUDUCTBYID;
				var params = {
					"productId": id,
					"userId": app.getUserId()
				};
				this.$network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						if (res.data) {
							that.productComment = res.data
							if (parseInt(that.productComment) > 100000) {
								that.productComment = '10万+'
							} else if (parseInt(that.productComment) > 90000) {
								that.productComment = '9万+'
							} else if (parseInt(that.productComment) > 80000) {
								that.productComment = '8万+'
							} else if (parseInt(that.productComment) > 70000) {
								that.productComment = '7万+'
							} else if (parseInt(that.productComment) > 60000) {
								that.productComment = '6万+'
							} else if (parseInt(that.productComment) > 50000) {
								that.productComment = '5万+'
							} else if (parseInt(that.productComment) > 40000) {
								that.productComment = '4万+'
							} else if (parseInt(that.productComment) > 30000) {
								that.productComment = '3万+'
							} else if (parseInt(that.productComment) > 20000) {
								that.productComment = '2万+'
							} else if (parseInt(that.productComment) > 10000) {
								that.productComment = '1万+'
							} else if (parseInt(that.productComment) > 5000) {
								that.productComment = '5000+'
							} else if (parseInt(that.productComment) > 1000) {
								that.productComment = '1000+'
							} else if (parseInt(that.productComment) > 500) {
								that.productComment = '500+'
							} else if (parseInt(that.productComment) > 100) {
								that.productComment = '100+'
							}
						}
					} else {
						dialog.toast(res.message);
					}
				}).catch(err => {
					console.log(err)
				});
			},
			// 根据商品ID,查询商品订单评价列表 (分页)(APP)
			getProductPageListByProductId() {
				var that = this
				var uri = app.globalData.config.interfaces
					.URL_ACTIVITY_PRODUCTCOMMENT_GETPRODUCTPAGELISTBYPRUDUCTBYID;
				var params = {
					"pageNum": 1,
					"pageSize": 3,
					"productId": this.goodId,
					"userId": app.getUserId()
				};
				this.$network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						that.commDetailList = res.data.list;
						for (var i = 0; i < that.commDetailList.length; i++) {
							var name = ''
							var NickName = that.commDetailList[i].nickName
							if (NickName.length == 1) {
								name = '*'
							} else {
								for (var j = 0; j < NickName.length - 1; j++) {
									name = name + '*'
								}
								name = name + NickName[NickName.length - 1]
							}
							that.commDetailList[i].nickName = name
						}

					} else {
						dialog.toast(res.message)
					}
				}).catch(err => {
					dialog.toast("获取商品详情错误");
					console.log(err)
				});

			},


			pageScroll() {

			},

			// 获取购物车数量
			getCartCount(e) {
				var uri = this.$config.interfaces.URL_MALL_GOODS_GET_CART_COUNT;
				this.$network.get(uri).then(res => {

				}).catch(res => {

				});
			},
			changedGoods(e) {

			},
			closePopupBuy(e) {
				this.buyMask = false;
			},
			selectSku(e) {

			},
			/**
			 * 规格弹窗开关
			 */
			shutMask(flag, buyFlag, type) {
				this.buyMask = true;
				this.$refs.popupGoodsItemInfoAPP.getGoodsItemInfoAPP()
			},
		}
	}
</script>

<style>
	/* page{
		background-color: #E5E5E5;
	} */
	page {
		background-image: url(https://pfmotortest.hb4oss.xstore.ctyun.cn/appstatic/img/my_logo_bg.png);
		width: 100%;
		height: 100%;
		background-repeat: space;
		background-size: 100%;
	}
</style>
<style scoped lang="scss">
	.head-image {
		width: 100%;
		height: auto;
	}

	.scroll-page {
		width: 100%;
		height: 100%;
	}

	// 商品详情
	.content-container {
		// background-color: #E5E5E5;

		display: flex;
		flex-direction: column;
		/* align-items: center; */
		justify-content: space-between;
		box-sizing: border-box;

		.priceInfo {
			margin-top: 16rpx;
			margin-left: 16rpx;
			margin-right: 16rpx;
			padding: 32rpx;
			background-color: white;
			border-radius: 12rpx;

			.h1 {
				color: #3D3A3A;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 46rpx;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.h2 {
				font-weight: 400;
				font-size: 28rpx;
				color: #ADB0AE;
				line-height: 40rpx;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.h3 {
				font-weight: 400;
				font-size: 28rpx;
				color:#3D3A3A;
				line-height: 40rpx;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.h1View {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
			}

			.endtext {
				font-style: normal;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 34rpx;
				color: #3D3A3A;

			}

			.jianju {
				margin-left: 8rpx;
				margin-right: 8rpx;
			}

			.countdownTime {
				// width: 54px;
				height: 29px;
				box-sizing: border-box;
				border-radius: 2px;
				text-align: center;
				line-height: 29px;
				align-items: center;
				font-size: 14px;
				color: #FFFFFF;
				border: 1px solid #EA5404;
				background-color: #EA5404;

			}


			.h3View {
				display: flex;
				flex-direction: row;
				align-items: center;

				.miaoshaIcon {
					width: 48rpx;
					height: 48rpx;
					margin-right: 8rpx;
					align-self: center;
				}

				.h3 {
					font-weight: 400;
					font-size: 28rpx;
					color: #EA5404;
					line-height: 32rpx;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}

				.goods-price_1 {
					font-style: normal;
					font-weight: 400;
					font-size: 24rpx;
					line-height: 28rpx;
					text-decoration-line: line-through;
					color: #ADB0AE;
				}
			}

			.h4 {
				margin-top: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3A3A;
				height: 20rpx;
				line-height: 20rpx;
				color: #3D3A3A;
			}

			.way {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #ADB0AE;
				justify-content: space-between;
				margin-top: 20rpx;

				view {
					padding-left: 20rpx;
					padding-right: 20rpx;
					padding-top: 8rpx;
					padding-bottom: 8rpx;
					border: 1rpx solid #ADB0AE;
					border-radius: 5rpx;
				}

				view.selected {
					color: white;
					background-color: #EA5404;
					border: 1rpx solid #EA5404;
					border-radius: 5rpx;
				}
			}
		}

		//规格配置
		.specification {
			margin-left: 16rpx;
			margin-right: 16rpx;
			background-color: white;
			border-radius: 12rpx;
			margin-top: 28rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			padding-top: 8rpx;
			padding-bottom: 8rpx;



			.card-content {
				padding: 0 20rpx;
				flex: 8;
				color: black;
			}

			.card-flex {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				padding: 12rpx 0;
				// border-bottom: 2rpx solid #f9f9f9;
			}

			.card-title {
				flex: 1;
				color: #ADB0AE;
				font-weight: 400;
				font-size: 28rpx;
			}
		}

		.address {
			background-color: white;
			border-radius: 12rpx;

		}

		.remark {
			background-color: white;
			margin-top: 28rpx;
			margin-left: 16rpx;
			margin-right: 16rpx;
			border-radius: 12rpx;
		}

		.goods-detail {
			margin-top: 28rpx;
			display: flex;
			flex-direction: column;

			.title {
				width: 100%;
				text-align: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #ADB0AE;
				margin-bottom: 14rpx;
			}

			.content {
				background-color: white;
			}

		}
	}

	// 底部操作条
	.iphonex-bottom {
		padding-bottom: 46rpx;
	}

	.page-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
		background: #fff;
		height: 144rpx;
		width: 100%;
		display: flex;
		border-top: 1rpx solid #f2f2f2;
		box-sizing: border-box;
		padding: 16rpx;
		align-items: center;

		>.icon-btn {
			display: flex;
			align-items: center;

			flex: 1;

			>.icon-btn-item {
				flex: 1;
				position: relative;
				text-align: center;
				font-size: 22rpx;
				color: #262626;
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%;
				align-items: center;
				justify-content: center;

				>.icon-btn-name {
					margin: 4rpx 0;
				}

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		>.buy-btn {
			flex: 1.5;
			display: flex;
			align-items: center;
			height: 72rpx;
			border: 1px solid #EA5404;

			>.to-buy {
				background: #EA5404;
				color: #fff;
			}

			>.to-store-car {
				color: #EA5404;
			}

			>.to-store-btn {
				flex: 1;
				width: 100%;
				text-align: center;
				line-height: 72rpx;
				font-size: 28rpx;
				padding: 0;
			}
		}
	}
</style>
